<template>
    <div id="UserLayout">
        <div class="top-header">
            <div style="flex: 50%">
                现在是：{{nowDate}}
                <br>
                农历是：{{getLunarDay.lunarYear}}（{{getLunarDay.zodiac}}年）{{getLunarDay.dateStr}}
            </div>
            <div class="top-header-right">
                <span>联系站长</span>
                <span>联系管理员</span>
                <br>
                <span @click="$router.push('/welcome')">登录</span>
                <span style="margin-left: 52px" @click="$router.push('/register')">注册</span>
            </div>
        </div>
        <div class="header">
            <div class="header-max">
                <div class="header-max-left">
                    <div :style="Logoimg" style="height: 100%"></div>
                </div>
                <div class="header-max-center">
                    <el-tabs @tab-click="handleClick">
                        <el-tab-pane label="首页" name="UserIndex"></el-tab-pane>
                        <el-tab-pane label="家族资讯" name="FamilyInformation"></el-tab-pane>
                        <el-tab-pane label="查阅族谱" name="LookGenealogys"></el-tab-pane>
                        <el-tab-pane label="论坛留言" name="messages"></el-tab-pane>
                        <el-tab-pane label="帮助中心" name="HelpCenter"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="header-max-right"></div>
            </div>
        </div>
        <div class="center">
            <router-view></router-view>
        </div>
        <div class="footer">
            底部内容
        </div>

    </div>
</template>

<script>
    import { getLunar } from 'chinese-lunar-calendar'
    export default {
        name: "UserLayout",
        data() {
            return{

                nowDate:'',//新历+时间+星期几
                Logoimg: {
                    backgroundImage: "url(" + require("../../src/image/LOGO-3-3.png") + ")",
                    backgroundRepeat: "no-repeat",
                    // backgroundSize: "100%"
                },
                getLunarDay: '',//农历
                year: new Date().getFullYear(),
                month: new Date().getMonth() + 1,
                date: new Date().getDate()
            }
        },

        created() {
            this.getCurrentTime();
        },

        methods: {
            currentTime() {
                setInterval(this.formatDate, 500);
            },
            formatDate() {
                let date = new Date();
                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                let day = date.getDate(); // 日
                let week = date.getDay(); // 星期
                let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
                let hour = date.getHours(); // 时
                hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
                let minute = date.getMinutes(); // 分
                minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
                let second = date.getSeconds(); // 秒
                second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
                this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
            },
            handleClick(tab, event) {
                console.log(tab, event);
                if (tab.name == 'UserIndex') {
                    this.$router.push("/UserIndex")
                } else if(tab.name == 'FamilyInformation'){
                    this.$router.push("/FamilyInformation")
                } else if(tab.name == 'LookGenealogys'){
                    this.$router.push("/LookGenealogys")
                }else if(tab.name == 'messages'){
                    this.$router.push("/messages")
                }else if(tab.name == 'HelpCenter'){
                    this.$router.push("/HelpCenter")
                }
            },

        },
        mounted() {
            this.currentTime();
            // 获取农历
            this.getLunarDay = getLunar(this.year, this.month, this.date)
            console.log(this.getLunarDay)
        },
        // 销毁定时器
        beforeDestroy() {
            if (this.formatDate) {
                clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
            }
        }
    }
</script>

<style lang="scss">
    #UserLayout {
        background-color: honeydew;
        height: 100%;
        font-size: 16px;
        margin: 0;
        padding: 0;

        .top-header-right span{
            cursor: pointer;
            margin-left: 20px;
        }
        .top-header-right span:hover{
            transition: 100ms;
            color: cornflowerblue;
        }
        .top-header-right span:focus{
            color: #8000ff;
        }

        .top-header-right span:active  {
            color: #8000ff;
        }

        .top-header-right{
            /*text-align: right;*/
        }

        .header-max-left {
            padding: 0.5em 0;
            flex: 35%;
            /*background-color: coral;*/
        }

        .header-max-center div{
            /*border: 1px solid white;*/
            text-align: center;
            flex: 20%;
            cursor: pointer;
            /*padding: 1em 0;*/
        }
        .el-tabs__item{
            font-size: 1.1em;
        }
        .el-tabs__header{
            margin-top: 2.5em;
        }

        .header-max-center {
            display: flex;
            flex: 45%;
            padding: 0 2em ;
            /*padding-top: 3em!important;*/
            /*background-color: salmon;*/
        }

        .header-max-right {
            flex: 20%;
            background-color: darkseagreen;
        }

        .header-max {
            display: flex;
            height: 5em;
            width: 75%;
            margin: 0 auto;
            /*background-color: #7cecee;*/
        }
        .top-header{
            display: flex;
            width: 75%;
            margin: 0 auto;
            padding: 5px 0;
            /*background-color: cadetblue;*/
        }
        .header {
            height: 5em;
            background-color: PaleTurquoise;
        }

        .center {
            height: 100em;
            width: 75%;
            margin: 0 auto;
            background-color: #409FA0;
        }

        .footer {
            height: 10em;
            background-color: chocolate;
        }
    }
</style>